<template>
  <el-carousel indicator-position="out side" height="200px">
    <el-carousel-item v-for="item in imgs" :key="item" class="ui">
      <img :src="item">
    </el-carousel-item>
  </el-carousel>
</template>

<script>
export default {
 name:"BannerVue",
 data(){
  return{
    imgs:[
      require("../assets/1.webp"),
      require("../assets/2.webp"),
      require("../assets/3.webp"),
      require("../assets/4.webp"),
      // require("../assets/5.jpg")
    ]
  }
 }
}

</script>

<style scoped>
  .el-carousel__item img{
    color: #475669;
    opacity: 0.75;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  .ui{
    margin-top: .3125rem;
    height:12.5rem;
    border-radius: .9375rem;
   
  } 
 img{
   width: 100%;
    height: 100%;
 }
</style>